{# The scheduler clock (the landing page's, on live data). Counts and state
   are part of it: the hub says whether it is running, the legend closes
   with a one-line summary.
   Geometry comes from ``ui_scheduler.clock``. Each timed job is a slot
   rotated to its angle (``--angle``), holding its dot and its run's arc, so
   picking a job and moving it (static/js/clock.js) only turns the slot. The
   hand is a 24-hour CSS rotation started at the current time and always
   shows now. Moves are previews: nothing is saved. #}
{# A job in the hub: its name, its time (with where it moved from, when
   ``moved`` says so), and a hint line from the call block. ``job`` is the
   Alpine expression naming the job (``selected``, ``hovered``). #}
{% macro hub_job(job, moved="false") %}
<div class="text-xs font-semibold text-aegis-text truncate max-w-[12rem]" x-text="nameOf({{ job }})"></div>
<div class="mt-1 font-mono text-2xl font-semibold tabular-nums text-aegis-text">
  <span x-show="{{ moved }}" class="text-aegis-muted text-base" x-text="movedFrom({{ job }}) + ' →'"></span>
  <span x-text="timeOf({{ job }})"></span>
</div>
<div class="mt-1 text-xxs tracking-wider text-aegis-muted">{{ caller() }}</div>
{% endmacro %}
{% set meta = component.metadata or {} %}
{# "running_persistent" -> "running": the store is already on the hub. #}
{% set state = (meta.get("scheduler_state") or "unknown").split("_")[0] %}
<div class="space-y-6">
  <div id="scheduler-clock-view" x-data="schedulerClock()" @click.outside="neutral()" @keydown.escape="neutral()"
       class="flex flex-col lg:flex-row items-center justify-center gap-10 lg:gap-14 pt-10 pb-4">
    <div id="scheduler-clock" class="clock" :class="{ 'clock--dragging': dragging }" x-ref="dial" @click="clickDial($event)"
         @pointermove="drag($event)" @pointerup="release()" @pointercancel="release()">
      <div class="clock__band{{ ' clock__band--live' if clock.band.continuous }}" aria-hidden="true"></div>
      {% for dot in clock.band.dots %}
      <span class="clock__bandjob" style="left: {{ dot.x }}%; top: {{ dot.y }}%" aria-hidden="true"></span>
      {% endfor %}
      {% for tick in clock.ticks %}
      <span class="clock__tick{{ ' clock__tick--major' if tick.major }}" style="left: {{ tick.x }}%; top: {{ tick.y }}%; rotate: {{ tick.angle }}deg" aria-hidden="true"></span>
      {% endfor %}
      {% for label in clock.labels %}
      <span class="clock__hour" style="left: {{ label.x }}%; top: {{ label.y }}%" aria-hidden="true">{{ label.text }}</span>
      {% endfor %}
      <div class="clock__hand" style="animation-delay: -{{ clock.seconds_since_midnight }}s" aria-hidden="true"></div>
      {% for job in clock.cron %}
      <div class="clock__slot" data-job-id="{{ job.id }}" data-name="{{ job.name }}" data-angle="{{ job.angle }}"
           data-sweep="{{ job.arc.sweep if job.arc else 0 }}" style="--angle: {{ job.angle }}deg"
           x-effect="place($el, '{{ job.id }}')" :data-state="stateOf('{{ job.id }}')">
        {% if job.arc %}
        <svg class="clock__arcs" viewBox="0 0 100 100" aria-hidden="true">
          <path class="clock__arc clock__arc--{{ job.color }}" d="{{ job.arc.d }}"><title>{{ job.name }}: {{ job.avg }} average</title></path>
        </svg>
        {% endif %}
        <button type="button" class="clock__job{{ ' clock__job--next' if job.next }}"
                aria-label="{{ job.name }}, {{ job.at }}: select, then drag or use the arrow keys to move it"
                @click="select('{{ job.id }}')" @pointerdown="grab($event, '{{ job.id }}')"
                @mouseenter="hover('{{ job.id }}')" @mouseleave="unhover('{{ job.id }}')"
                @focus="hover('{{ job.id }}')" @blur="unhover('{{ job.id }}')"
                @keydown.arrow-right.prevent="step('{{ job.id }}', 1)" @keydown.arrow-up.prevent="step('{{ job.id }}', 1)"
                @keydown.arrow-left.prevent="step('{{ job.id }}', -1)" @keydown.arrow-down.prevent="step('{{ job.id }}', -1)"></button>
      </div>
      {% endfor %}
      <div class="clock__hub" data-hub="move" x-show="selected" x-cloak>
        {% call hub_job("selected", "isMoved()") %}{{ clock.timezone }} · drag or use arrow keys{% endcall %}
        <div data-preview x-show="isMoved()" class="mt-1 text-xxs caps text-aegis-amber">Preview only, not saved</div>
        <div class="mt-3 flex items-center justify-center gap-2">
          <button type="button" data-reset x-show="isMoved()" @click="reset()"
                  class="text-xxs caps px-2 py-0.5 rounded border border-aegis-teal/50 text-aegis-teal hover:bg-aegis-teal/10">Reset</button>
          <button type="button" @click="neutral()" class="text-xxs caps px-2 py-0.5 rounded border border-aegis-border text-aegis-muted hover:text-aegis-text">Done</button>
        </div>
      </div>
      <div class="clock__hub" data-hub="hover" x-show="!selected && hovered" x-cloak>
        {% call hub_job("hovered") %}<span class="text-aegis-teal">click to select, then drag</span>{% endcall %}
      </div>
      <div class="clock__hub" data-hub="live" x-show="!selected && !hovered">
        <div class="font-mono text-xs uppercase tracking-[0.3em] text-aegis-teal">APScheduler</div>
        <div class="mt-1 text-xxs tracking-wider text-aegis-muted"><span class="{{ 'text-aegis-amber' if state != 'running' }}">{{ state }}</span> · {{ store }} · {{ clock.timezone }}</div>
      </div>
    </div>
    <div id="scheduler-legend" class="w-full max-w-xs space-y-4">
      {% for job in clock.cron %}
      <button type="button" class="clock__row flex w-full items-center gap-3 text-left" data-job-id="{{ job.id }}"
              :data-state="stateOf('{{ job.id }}')" @click="select('{{ job.id }}')"
              @mouseenter="hover('{{ job.id }}')" @mouseleave="unhover('{{ job.id }}')">
        <span class="clock__litdot{{ ' clock__litdot--next' if job.next }}{{ ' clock__litdot--' ~ job.color if job.color }}" aria-hidden="true"></span>
        <span data-job class="text-sm font-semibold text-aegis-text truncate">{{ job.name }}</span>
        <span class="ml-auto text-right font-mono text-xs text-aegis-muted">
          <span x-show="movedFrom('{{ job.id }}')" class="line-through opacity-60" x-text="movedFrom('{{ job.id }}')" x-cloak></span>
          <span x-text="timeOf('{{ job.id }}')">{{ job.at }}</span>
          {%- if job.every or job.avg %}<span class="block text-xxs">{{ [job.every|lower if job.every, (job.avg ~ " avg") if job.avg]|select|join(" · ") }}</span>{% endif %}
        </span>
      </button>
      {% else %}
      <p class="text-sm text-aegis-muted">No timed jobs.</p>
      {% endfor %}
      {% if clock.interval %}
      <div data-intervals class="pt-3 border-t border-aegis-border space-y-1.5 font-mono text-xs text-aegis-muted">
        {% for job in clock.interval %}
        <div class="flex items-center gap-2.5">
          <span class="w-2.5 h-2.5 shrink-0 rounded-full bg-aegis-muted/60" aria-hidden="true"></span>
          <span><span class="text-aegis-text">{{ job.every|lower }}</span> · {{ job.name }}</span>
        </div>
        {% endfor %}
      </div>
      {% endif %}
      {% set paused = meta.get("paused_tasks", 0) %}
      <p id="scheduler-summary" class="pt-3 border-t border-aegis-border font-mono text-xxs text-aegis-muted">
        {{ meta.get("total_tasks", 0) }} jobs · {{ meta.get("active_tasks", 0) }} active ·
        <span class="{{ 'text-aegis-amber' if paused else '' }}">{{ paused }} paused</span>
        {%- if component.response_time_ms is not none %} · checked in {{ "%.0f"|format(component.response_time_ms) }} ms{% endif %}
      </p>
    </div>
  </div>
</div>